<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>SUPERSCROLLORAMA - Simple Demo #2</title>
    <link rel="stylesheet" href="css/normalize.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
</head>

<body class="simple-demo">
    <div id="content-wrapper">
        <div id="examples-1">
            <h2 id="fade-it">Fade It</h2>
            <h2 id="Sabi">我是那个啥？</h2>
            <div class="two-box">
                <div class="left-box">
                	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident, corporis maxime. Corporis tempore temporibus eos unde dolorem repellat consectetur quae enim laborum iure quidem officiis cumque, officia nam quibusdam beatae.
                </div>
                <div class="right-box">
                	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe, error? Ipsa, error, eos necessitatibus pariatur quaerat temporibus nisi modi itaque nobis unde totam vitae nulla, excepturi doloribus, eius soluta hic.</p>
                	<p>Quis quo eligendi tempora ad adipisci, eveniet optio. Voluptates commodi voluptate odit a blanditiis, nostrum in deserunt repellendus, quia vitae ab dolores doloribus beatae sed placeat quaerat hic voluptatem ad.</p>
                </div>
            </div>
            <h2 id="fly-it">Fly It</h2>
            <h2 id="spin-it">Spin It</h2>
            <h2 id="scale-it">Scale It</h2>
            <h2 id="smush-it">Smush It</h2>
        </div>
    </div>
    <script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')
    </script>
    <script src="js/jquery.superscrollorama.js"></script>
    <script>
    $(document).ready(function() {
        // This example adds a duration to the tweens so they are synced to the scroll position

        var controller = $.superscrollorama();

        // amount of scrolling over which the tween takes place (in pixels)
        var scrollDuration = 200;

        // individual element tween examples
        controller.addTween('#fade-it', TweenMax.from($('#fade-it'), .5, {
            css: {
                opacity: 0
            }
        }), scrollDuration);
        controller.addTween('#Sabi', TweenMax.from($('#Sabi'), .25, {
            css: {
                opacity: 0,
                rotation: 720,
                fontSize: '120px'
            },
            ease: Quad.easeOut
        }), scrollDuration);

        controller.addTween('.two-box', new TimelineLite().append([TweenMax.from($('.left-box'), 3, {
            css: {
            	opacity: 0,
                rotation: 360,
                width: '20px',
                height: '20px',
                right: '1000px'
            },
            ease: Quad.easeInOut
        }),TweenMax.from($('.right-box'), 3, {
            css: {
            	opacity: 0,
                rotation: 360,
                width: '20px',
                height: '20px',
                left: '1000px'
            },
            ease: Quad.easeInOut
        })]), scrollDuration);
/*        controller.addTween('.left-box', TweenMax.from($('.left-box'), .25, {
            css: {
            	opacity: 0,
                rotation: 720,
                width: '20px',
                height: '20px',
                right: '1000px'
            },
            ease: Quad.easeInOut
        }), scrollDuration);
        controller.addTween('.right-box', TweenMax.from($('.right-box'), .25, {
            css: {
            	opacity: 0,
                rotation: 720,
                width: '20px',
                height: '20px',
                left: '1000px'
            },
            ease: Quad.easeInOut
        }), scrollDuration);*/
        controller.addTween('#fly-it', TweenMax.from($('#fly-it'), .25, {
            css: {
                right: '1000px'
            },
            ease: Quad.easeInOut
        }), scrollDuration);
        controller.addTween('#spin-it', TweenMax.from($('#spin-it'), .25, {
            css: {
                opacity: 0,
                rotation: 720
            },
            ease: Quad.easeOut
        }), scrollDuration);
        controller.addTween('#scale-it', TweenMax.fromTo($('#scale-it'), 1, {
            css: {
                opacity: 0,
                fontSize: '20px'
            },
            immediateRender: true,
            ease: Quad.easeInOut
        }, {
            css: {
                opacity: 1,
                fontSize: '240px'
            },
            ease: Quad.easeInOut
        }), scrollDuration);
        controller.addTween('#smush-it', TweenMax.fromTo($('#smush-it'), .25, {
            css: {
                opacity: 0,
                'letter-spacing': '30px'
            },
            immediateRender: true,
            ease: Quad.easeInOut
        }, {
            css: {
                opacity: 1,
                'letter-spacing': '-10px'
            },
            ease: Quad.easeInOut
        }), scrollDuration); // 100 px offset for better timing
    });
    </script>
</body>

</html>
